<template>
	<view class="page" style="">
		<nav-bar @selectSewlingLine="changeSewingLine" />
		<view class="content">
			<view class="left">
				<view class="l-header">
					<view class="info" style="display: flex;height: 100%;">
						<view class="title-icon"></view>
						<text style="color: #333;font-size: 1.2rem">{{ productionInfo.billNo }}</text>
					</view>
					<view class="info">{{ $t('pages.quality.styleNo') }}：<text>{{ productionInfo.styleNo }}</text>
					</view>
					<view class="info">{{ $t('pages.quality.styleName') }}：<text>{{ productionInfo.styleName }}</text>
					</view>
					<view class="info">{{ $t('pages.quality.customer') }}：<text>{{ productionInfo.customerName }}</text>
					</view>
					<view class="info">{{ $t('pages.quality.pass') }}/{{ $t('pages.quality.order') }}：<text>{{this.productionInfo.qualifeidNum || 0 }}/{{ this.productionInfo.orderNum || 0 }}</text></view>
					<view class="info extra-info">
						<u-line-progress :percentage="qualityRate" activeColor="#3EAAF7" :showText="false">
						</u-line-progress>
					</view>
					<view class="flex-center">
						<view class="changeStyle" @click="changeStyle">{{ $t('pages.quality.exchange') }}</view>
					</view>
				</view>
				<scroll-view scroll-y="true" class="scroll-list">
					<view class="l-listInfo">
						<u-list @scrolltolower="scrolltolower">
							<u-list-item v-for="(item, index) in productionInfo.productionDetailList" :key="index">
								<view :class="item.selectedStyle ? 'active' : 'item'" @click="getStyleData(item,index)">
									<view class="item-info"><text>{{ item.color}}-{{ item.size }}</text></view>
									<view class="item-info"><text>{{ $t('pages.quality.order') }}：</text>{{ item.num}}
									</view>
									<view class="item-info"><text>{{ $t('pages.feeding.feed') }}：</text>{{ item.feedNum}}</view>
								</view>
							</u-list-item>
						</u-list>
					</view>
				</scroll-view>
			</view>
			<view v-if="rightNoData">{{ $t('pages.quality.tipsData') }}</view>
			<view v-else class="right">
				<view class="r-header">
					<view class="h-left">
						<!-- 产量 -->
						<view class="yield">
							<view>{{ $t('pages.quality.todayGoal') }}：<text>{{ productionInfo.goal }}</text></view>
							<view>{{ $t('pages.feeding.todayFeed') }}：<text>{{ productionInfo.feedNum }}</text></view>
						</view>
						<!-- 图表 -->
						<view v-if="chartShow" class="chart">
							<cycleChart :passRate="passRate" ref="cycleChart" />
						</view>
					</view>
					<view class="h-right">
						<view class="flex-margin">
							<view class="color-size">
								<view style="text-align: left;">
									<text>{{ currentProductionInfo.color }}-{{ currentProductionInfo.size }}</text>
								</view>
							</view>
							<view class="info-bootom flex">
								<view class="left">
									<view>{{ $t('pages.exchangeLine.orderNumber') }}：<text>{{ currentProductionInfo.num }}</text></view>
									<view>{{ $t('pages.feeding.feed') }}：<text>{{ currentProductionInfo.feedNum }}</text></view>
								</view>
								<view class="right">
									<view style="display: flex;justify-content: center;font-size: 1.5rem;">{{ skuFeedRate.toFixed(0) }}%</view>
									<view>
										<u-line-progress :percentage="skuFeedRate" activeColor="#3E8FF7"
											:showText="false"></u-line-progress>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="r-middle">
					<view class="flex-left-margin">
						<view class="qualified">{{ $t('pages.feed.feed') }}</view>
						<view class="number">
							<u-number-box v-model="feedNum" integer :min="0">
								<view slot="minus" class="minus flex-center">
								<span style="transform: scale(2.5);">—</span>
								</view>
								<u--input v-model="feedNum" slot="input" type="number" class="input flex-center"
									@input="TypeInput($event, 'qualifiedNum')"></u--input>
								<view slot="plus" class="plus flex-center">
									+
								</view>
							</u-number-box>
						</view>
						<view class="flex-number">
							<view class="item" v-for="commonNumber in commonInputList" :key="commonNumber"
								@click="feedNum = commonNumber">{{ commonNumber }}</view>
						</view>
					</view>
					<view class="left-confirm">
						<u-button type="primary" :disabled="allowClick" @click="saveFeedingHandle">{{ $t('common.submit') }}</u-button>
					</view>
				</view>
				<view class="r-bottom">
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="table">
							<uni-table :stripe="false" :emptyText="$t('common.noData')">
								<!-- 表头行 -->
								<uni-tr class="fixed-th">
									<!-- 序号 时间 -->
									<uni-th width="50px" align="center">{{ $t('pages.quality.no') }}</uni-th>
									<uni-th width="100px" align="center">{{ $t('pages.feeding.time') }}</uni-th>
									<uni-th width="80px" align="center">{{ $t('pages.quality.color') }}</uni-th>
									<uni-th width="80px" align="center">{{ $t('pages.quality.size') }}</uni-th>
									<uni-th width="40px" align="center">{{ $t('pages.feeding.feedingNum') }}</uni-th>
								</uni-tr>
								<!-- 表格数据行 -->
								<uni-tr v-for="(item, index) in currentProductionInfo.iotFeedingDetailList"
									:key="index">
									<uni-td align="center">{{index + 1}}</uni-td>
									<uni-td align="center">{{ item.createDate }}</uni-td>
									<uni-td align="center">{{ item.color }}</uni-td>
									<uni-td align="center">{{ item.size }}</uni-td>
									<uni-td align="center">
										<view>
											<u-input v-model="item.feedNum" type="number" inputAlign="center" @blur="updateNum(item)">
												<template slot="suffix">
													<image src="../../static/img/editFeeding.png"></image>
													</template>
											</u-input>
										</view>
										<!-- {{ item.feedNum }} -->
									</uni-td>
								</uni-tr>
							</uni-table>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="fixed-button">
			<view class="submit">
				<u-button :disabled="allowClick" @click="openConfirmModal">{{ $t('common.submit') }}</u-button>
			</view>
			<view class="back">
				<u-button @click="backRouter">{{ $t('common.return') }}</u-button>
			</view>
		</view>
		<!-- 换款弹出窗 -->
		<styleSelect ref="styleSelect" @selectStyle="getNewStyleInfo" />
		<!-- 提交提示 -->
		<u-modal :show="confirmShow" :confirmText="$t('common.determine')" :cancelText="$t('common.cancel')"
			:showCancelButton="true" @confirm="confrimHandle" @cancel="confirmShow = false" content="确认提交吗？"></u-modal>
	</view>
</template>

<script>
	import storage from "@/utils/storage.js"
	import navBar from "@/components/nav/index.vue"
	import styleSelect from "@/components/production/styleSelect.vue"
	import cycleChart from "@/pages/quality/components/cycleChart.vue"
	import {
		isNumber
	} from "@/utils/verify.js"
	import {
		getPrepareFeeding,
		saveFeeding,
		saveFeedingDetails
	} from "@/api/feeding.js"
	export default {
		components: {
			navBar,
			cycleChart,
			styleSelect
		},
		data() {
			return {
				confirmShow: false,
				allowClick: false,
				productionId: '',
				sewingId: '',
				feedNum: null,
				currentStyleIndex: 0,
				qualityRate: 0,
				// sku投料率
				skuFeedRate: 0,
				tableData: [],
				// 生产单信息
				productionInfo: {
					billNo: '',
					styleNo: '',
					styleName: '',
					customerName: '',
				},
				// 工序信息
				processList: [],
				currentProductionInfo: {
					// 下单数量
					orderQuantity: 0,
					// 完成数量
					completedNum: 0,
					// 成衣合格件数
					qualifiedNum: 0,
					// 成衣不合格件数
					unqualifiedNum: 0,
					// 成衣报废件数
					discardedNum: 0,
				},
				chartShow: false,
				passRate: '',
				rightNoData: true,
				allowSave: false,
				scrollTop: 0,
				value: 0,
				commonInputList: [5, 15, 10, 20],
				queryParams: {
					sewingId: this.sewingId,
					productionId: '',
					inspectionId: ''
				},
				indexList: []
			};
		},
		onLoad(option) {
			this.queryParams.sewingId = option.sewingId
			plus.screen.lockOrientation('landscape-primary') //锁定横屏
		},
		mounted() {
			this.getProductionInfo()
		},
		methods: {
			updateNum(e) {
				// 修改sku投料量
				saveFeedingDetails(e).then(res => {
					if (res.code !== 0) {
						// #ifdef APP-PLUS
						plus.nativeUI.toast(`<p style=\"font-size: 28px\">${res.msg}</p>`,{
							type: "richtext",
							duration: "long",
							verticalAlign: "middle"
						}
						);
						return
						// #endif
						return uni.$u.toast(res.msg)
					}
					// #ifdef APP-PLUS
					plus.nativeUI.toast(`<p style=\"font-size: 28px\">${this.$t('common.success')}</p>`,{
						type: "richtext",
						duration: "short",
						verticalAlign: "middle"
					}
					);
					// #endif
					// uni.$u.toast(this.$t('common.success'))
					setTimeout(() => {
						this.getProductionInfo()
					},1000)
				})
			},
			confrimHandle() {
				this.saveProductionInfo()
				this.confirmShow = false
			},
			openConfirmModal() {
				this.saveProductionInfo()
			},
			TypeInput(e, type) {
				// 只能输入数字的验证;
				const inputType = /[^\d]/g //想限制什么类型在这里换换正则就可以了
				this.$nextTick(function() {
					if (type === 'qualifiedNum') {
						this.currentProductionInfo.qualifiedNum = e.replace(inputType, '');
					} else if (type === 'unqualifiedNum') {
						this.currentProductionInfo.unqualifiedNum = e.replace(inputType, '');
					} else {
						this.currentProductionInfo.discardedNum = e.replace(inputType, '');
					}

				})
			},
			updateNumber(e, index, type) {
				const inputType = /[^\d]/g //想限制什么类型在这里换换正则就可以了
				if (type === 'processList') {
					this.productionInfo.processList[index].questionNum = e.replace(inputType, '');
				} else {
					this.productionInfo.defectiveSpotList[index].questionNum = e.replace(inputType, '');
				}
			},
			// 获取产量登记信息
			getProductionInfo() {
				this.feedNum = null
				getPrepareFeeding(this.queryParams).then(res => {
					if (res.code !== 0) return uni.$u.toast(res.msg)
					this.productionInfo = res.data
					if (res.data.productionDetailList && res.data.productionDetailList.length > 0) {
						this.rightNoData = false
						this.calculationPassRate()
						res.data.productionDetailList.map(item => {
							item.selectedStyle = false
						})
						res.data.productionDetailList[this.currentStyleIndex].selectedStyle = true
						this.getStyleData(this.productionInfo.productionDetailList[this.currentStyleIndex], this
							.currentStyleIndex)
					} else {
						this.rightNoData = true
						this.qualityRate = 0
					}
				})
			},
			// 计算合格率
			calculationPassRate() {
				if (this.productionInfo.qualifeidNum && this.productionInfo.orderNum) {
					// 合格/下单
					this.qualityRate = (this.productionInfo.qualifeidNum / this.productionInfo.orderNum)
					this.qualityRate = Number(this.qualityRate.toFixed(2)) * 100
				} else {
						this.qualityRate = 0
				}
				if (this.productionInfo.goal && this.productionInfo.feedNum) {
					this.passRate = ((this.productionInfo.feedNum / this.productionInfo.goal) * 100).toFixed(0)
					this.chartShow = true
					setTimeout(() => {
						this.$refs.cycleChart.getServerData()
					}, 200)
				} else {
					this.chartShow = false
				}
			},
			saveFeedingHandle() {
				if (!this.feedNum || !Number(this.feedNum)) {
					// #ifdef APP-PLUS
					plus.nativeUI.toast(`<p style=\"font-size: 28px\">${this.$t('pages.feeding.tips1')}</p>`,{
						type: "richtext",
						duration: "long",
						verticalAlign: "middle"
					}
					);
					return
					// #endif
					return uni.$u.toast(this.$t('pages.feeding.tips1'))
				}
				let params = this.currentProductionInfo
				params.sewingId = this.queryParams.sewingId
				params.productionId = this.currentProductionInfo.orderId
				delete params.id
				params.feedNum = this.feedNum
				saveFeeding(params).then(res => {
					if (res.code !== 0) return uni.$u.toast(res.msg)
					this.allowClick = true
					// uni.$u.toast(this.$t('common.success'))
					// #ifdef APP-PLUS
					plus.nativeUI.toast(`<p style=\"font-size: 28px\">${this.$t('common.success')}</p>`,{
						type: "richtext",
						duration: "long",
						verticalAlign: "middle"
					}
					);
					// #endif
					setTimeout(() => {
						this.getProductionInfo()
						this.allowClick = false
					}, 1000)
				})
			},
			//保存
			saveProductionInfo() {
				this.saveFeedingHandle()
			},
			// 获取生产单数据
			getStyleData(item, index) {
				this.productionInfo.productionDetailList.map((item, i) => {
					if (i === index) {
						item['selectedStyle'] = true
					} else {
						item['selectedStyle'] = false
					}
				})
				this.currentStyleIndex = index
				this.currentProductionInfo = this.productionInfo.productionDetailList[index]
				this.productionId = this.currentProductionInfo.productionId
				if (this.currentProductionInfo.feedNum && this.currentProductionInfo.num) {
					this.skuFeedRate = (this.currentProductionInfo.feedNum / this.currentProductionInfo.num)
					this.skuFeedRate = Number(this.skuFeedRate.toFixed(2)) * 100
				} else {
					this.skuFeedRate = 0
				}
			},
			// 获取数据
			// getList() {
			// list(this.queryParams).then(res => {
			// 	for (let obj of res.data) {
			// 		this.list.push(obj)
			// 	}
			// this.queryParams.pageNum++
			// console.log(this.queryParams.pageNum, 'this.queryParams.pageNum')
			// })
			// },
			// 页面滑动到底部
			scrolltolower() {
				console.log('已经到底部了')
				// this.getList()
			},
			backRouter() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 换款打开款式选择弹窗
			changeStyle() {
				this.$nextTick(() => {
				this.$refs.styleSelect.openDialog(this.queryParams.sewingId, '/iot-mobile-api/inspection/changeProductionPage')
				})
			},
			getNewStyleInfo(e) {
				this.queryParams.productionId = e.id
				this.getProductionInfo()
			},
			// 切换缝制线
			changeSewingLine(e) {
				this.queryParams.sewingId = e
				this.queryParams.productionId = ''
				this.getProductionInfo()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'index.scss';
</style>
